<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="路由名称" prop="name">
        <el-input v-model.trim="form.name" />
      </el-form-item>
      <el-form-item label="类型" prop="auth_type">
        <el-radio-group v-model="form.auth_type">
          <el-radio-button :label="1">菜单</el-radio-button>
          <el-radio-button :label="2">按钮</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="type !== 'default'" label="api_path" prop="api_path">
        <el-input v-model.trim="form.api_path" />
      </el-form-item>
      <el-form-item
        v-if="type !== 'default'"
        label="权限编码"
        prop="web_permission"
      >
        <el-input v-model.trim="form.web_permission" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model.trim="form.sort" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio-button :label="1">启用</el-radio-button>
          <el-radio-button :label="0">禁用</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { doEdit, doAdd } from '@/api/permission'
  import { nextTick } from 'vue'

  export default defineComponent({
    name: 'AdminPermissionEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        form: {
          name: '', //名称
          api_path: '', //api鉴权地址（按钮权限必填）
          web_permission: '', //前端权限标识（按钮权限必填/菜单第一层允许为空）
          sort: 0, //排序
          auth_type: 1, //权限类型：1=菜单;2=按钮
          status: 1, //状态:1=正常;0=禁用
        },
        rules: {
          name: {
            required: true,
            trigger: 'blur',
            message: '请输入菜单或权限',
          },
        },
        title: '',
        dialogFormVisible: false,
        type: '',
      })

      const showEdit = (row, type) => {
        state.type = type
        state.dialogFormVisible = true
        nextTick(() => {
          if (!row) {
            state.form.pid = 0
            state.title = '添加菜单'
          } else {
            const defaultRow = JSON.parse(JSON.stringify(row))
            switch (type) {
              case 'subLevel':
                console.log('添加下级')
                state.title = '添加下级'
                state.form.pid = defaultRow.id
                break
              case 'edit':
                console.log('编辑权限')
                state.form = defaultRow
                state.title = '编辑'
                break
            }
          }
        })
      }
      const close = () => {
        state['formRef'].resetFields()
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            if (state.type !== 'edit') {
              const { msg } = await doAdd(state.form)
              $baseMessage(msg, 'success', 'vab-hey-message-success')
            } else {
              const { msg } = await doEdit(state.form)
              $baseMessage(msg, 'success', 'vab-hey-message-success')
            }

            emit('fetch-data')
            close()
          }
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
      }
    },
  })
</script>
